<template>
  <div>
    <el-popover
        placement="top"
        width="160"
        v-model="visible">
      <p>确定删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="del">确定</el-button>
      </div>
    </el-popover>
    <el-dialog title="修改教室" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="年级/等级名称" :label-width="formLabelWidth">
          <el-input v-model="form.className" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateClassRoom">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加年级" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="年级/等级名称" :label-width="formLabelWidth">
          <el-input v-model="form1.className" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="classRoomadd">确 定</el-button>
      </div>
    </el-dialog>
    <el-row>
      <el-col>
        <span style="float: left">校区:<template>
  <el-select v-model="value" clearable @change="getInfo" placeholder="请选择">
    <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.campusName"
        :value="item.id">
    </el-option>
  </el-select>
</template></span>
        <el-button style="float: right" size="mini" @click="add" type="danger">添加</el-button>
      </el-col>
      <el-col>
        <template>
          <el-table
              ref="singleTable"
              :data="tableData"
              style="width: 100%">
            <el-table-column
                property="className"
                label="年级/等级名称"
                width="120">
            </el-table-column>
            <el-table-column
                property="createTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="edit(scope)" type="primary">编辑</el-button>
                <el-button size="mini" @click="open(scope)" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
name:'classRoomSet',
  data() {
    return {
      tableData: [],
      total: 0,
      visible: false,
      id:0,
      dialogFormVisible:false,
      dialogFormVisible1:false,
      form:{},
      form1:{},
      formLabelWidth: '120px',
      options:'',
      value:'',

    };
  },
  mounted() {
   this.findinfo()
    this.$axios.get("/schoolSet/findCampus").then(res => {
      console.log(res.data)
      this.options = res.data.data.records
      this.total = res.data.data.total
    })
  },
  methods: {
     getInfo(){
       console.log(this.value)
       if (this.value!=''){
         this.$axios.get("/schoolSet/findClassRoom1/"+this.value).then(res=>{
                 console.log(res.data)
           if (res.data.code==200) {
              this.tableData=res.data.data;
           }else {
             this.$message.error("该校区还没有教室")
           }
         })
       }else {
         this.findinfo();
       }
     },
    findinfo(){
      this.$axios.get("/schoolSet/findClassRoom").then(res => {
        console.log(res.data)
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    classRoomadd() {
      this.$axios.post("/schoolSet/insertClassRoom/"+this.value,this.form1).then(res=>{
        console.log(res.data)
        if(res.data.code==200){
          this.$message.success("添加成功")
        }else {
          this.$message.error("添加失败")
        }
      })
    },
    open(scope){
      this.visible=true
      this.id= scope.row.id
    },
    del() {
      this.visible=false
      this.$axios.get("/schoolSet/delClassRoom/"+this.id+"/"+this.value).then(res=>{
        console.log(res.data)
        if (res.data.code==200){
          this.$message.success("删除成功")
          this.$axios.get("/schoolSet/findClassRoom").then(res => {
            console.log(res.data)
            this.tableData = res.data.data.records
            this.total = res.data.data.total
          })
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    add(){
      this.dialogFormVisible1=true;
    }
    ,
    edit(scope) {
       this.dialogFormVisible=true;
      console.log(scope.row)
      this.form=scope.row
    },
    updateClassRoom(){
      this.$axios.post("/schoolSet/updateClassRoom",this.form).then(res=>{
        console.log(res.data)
        if(res.data.code==200){
          this.$message.success("修改成功")
        }else {
          this.$message.error("修改失败")
        }
      })
    }

  }
}
</script>

<style scoped>

</style>